<template>
 <el-dialog title="选择应用" v-model="visible" style="width: 752px">
	<el-row>
		<el-col :xl="6" :lg="6" :md="4"  v-for="(item,index) in appList" :key="index" style="padding: 15px">
			<div style="text-align:center" @click="selectApp(item)">
				<el-icon style="font-size:90px;cursor: pointer;" class="app-icon" :style="{'background-color': item.backColor, 'color': item.iconColor}"><component :is="item.appIcon" /></el-icon>
			</div>
			<div class="app-name">
				{{ item.appName }}
			</div>
		</el-col>
	</el-row>
	 <div style="margin-top: 20px; padding: 20px;" v-if="total>scPageSize">
		 <el-pagination  background :small="true"  :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
	 </div>

 </el-dialog>
</template>

<script>
	export default {

		data() {
			return {
				visible:false,
				cardNum: 1,
				appList: [],
				total:100,
				pageSizes:10,
				currentPage: 1,
				scPageSize:8
			}
		},
		methods: {
			open(){
				this.visible=true;
			},
			designApp(){
				this.$router.push({
					path: '/app/store/design',
					// query: {
					// 	appId: this.appCode
					// }
				});
			},
			// 应用列表
			async getAppList(){
				var res = res = await this.$API.app.appStore.listApp.get({pageNum:this.currentPage, pageSize: this.scPageSize});
				if (res.code == 200){
					this.appList = res.data.rows;
					this.total = res.data.total;
				}
			},
			//分页点击
			paginationChange() {
				this.$emit("current-change",this.currentPage,this.scPageSize)
				this.getAppList();
			},
			//条数变化
			pageSizeChange(size) {
				this.scPageSize = size
				this.$emit("current-change",this.currentPage,this.scPageSize)
				this.getAppList();
			},
			// 选中应用
			selectApp(item){
				this.$parent.selectApp(item)
				this.visible=false;
			}
		},
		created() {
			console.log(this.currentPage,this.scPageSize)
			this.getAppList();
		}
	}
</script>

<style scoped>
.app-name{
	text-align: center;
	margin-top:10px;
	font-size: 14px;
}
.app-icon{
	width:120px;
	height: 120px;
//fill: rgba(253, 253, 253, 0.65) !important;
//background-color: #409EFF;
	padding: 15px;
	border-radius: 12px;
}
</style>
